<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div>
                            <form class="form-inline" method="post"
                                  onsubmit="return false;">
                                &nbsp;&nbsp;&nbsp;

                                <div class="form-group">
                                    <input class="form-control" type="text" id="example-if-password"
                                           name="example-if-password" placeholder="标题/分类" autocomplete="off" v-model="keyword">
                                </div>
                                <div class="form-group">
                                    <el-cascader :options="categories"  @change="handleChangeSel" clearable></el-cascader>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit" v-on:click="searchClick()">筛选</button>
                                </div>
                            </form>
                        </div>
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;" v-loading="loading">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    @sort-change='sortChange'
                                    :default-sort="{prop: 'id', order: 'descending'}"
                            >
                                <el-table-column
                                        type="index"
                                        label="ID"
                                        :index="indexMethod"
                                        width="40">
                                </el-table-column>
                                <el-table-column
                                        label="图片"
                                        align="center"
                                        width="160">
                                    <template slot-scope="scope">
                                        <a :href="scope.row.imageUrl" target="_blank">
                                            <div class="block">
                                                <el-image :src="scope.row.imageUrl" style="width: 50%"></el-image>
                                            </div>
                                        </a>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        prop="big_name"
                                        label="所属一级分类"
                                        align="center"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="mid_name"
                                        label="所属二级分类"
                                        align="center"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="title"
                                        label="产品标题"
                                        align="center"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        label="产品SKU"
                                        align="center"
                                        width="80">
                                    <template slot-scope="scope">
                                    <span v-if="scope.row.color===1" style="color: red">{{scope.row.sku_id}}</span>
                                    <span v-else>{{scope.row.sku_id}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="在售价格"
                                        align="center"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="retail_price"
                                        label="Retail价格"
                                        align="center"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="save_price"
                                        label="SAVE的价格"
                                        align="center"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        label="ring_information"
                                        align="left"
                                        width="180">
                                    <template slot-scope="scope">
                                        <div class="block">
                                            <p v-for="(item,index) in scope.row.ringInformations">
                                                {{index}}:{{item}}
                                            </p>
                                        </div>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        label="gem_information"
                                        align="left"
                                        width="180">
                                    <template slot-scope="scope">
                                        <div class="block">
                                            <p v-for="(item,index) in scope.row.gemInformations">
                                                {{index}}:{{item}}
                                            </p>
                                        </div>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        prop="remark"
                                        label="备注"
                                        align="center"
                                        width="120">
                                </el-table-column>

                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="120">
                                    <template slot-scope="scope">
                                        <span class="span-success" @click="handleEdit(scope.row)">备注</span>
                                        <a :href="'/admin/image/'+scope.row.id" target="_bland">查看</a>
                                    </template>

                                </el-table-column>

                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total" :hide-on-single-page="pageActive"
                                        :page-size="pageSize"
                                        @size-change="handleSizeChange"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>


                            <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                                <el-form :model="form">


                                    <el-form-item label="备注" :label-width="formLabelWidth">
                                        <el-input
                                                type="textarea"
                                                placeholder="请输入备注"
                                                v-model="form.remark"
                                                :rows="4"
                                                maxlength="2000"
                                                show-word-limit
                                                style="width:80%;"
                                        >
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="submitSet">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import common from '../../api/public.js';
    export default {
        name: "ImageComponent",
        data() {
            return {
                url: '',
                keyword: '',
                pageActive: false,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                activeIndex: 1,
                options: [{
                    value: -1,
                    label: '全部'
                }, {
                    value: 1,
                    label: '显示'
                }, {
                    value: 0,
                    label: '隐藏'
                }],
                status: -1,
                form: {
                    remark:'',
                    id:0,
                },
                dialogFormVisible: false,
                formLabelWidth: '120px',
                restaurants: [],
                id: 0,
                order: 'desc',
                orderField: 'id',
                setTime:0,
                dialogFormTitle:'备注设置',
                categories:[],
                bigName:'',
                midName:'',
            }
        },
        methods: {
            ...common,
            search: function () {
                let self = this;
                let uri = 'image/post-list';
                self.loading = true;
                let postData = {
                    type: 5,
                    keyword: self.keyword,
                    status: self.status,
                    page: self.currentPage,
                    order: self.order,
                    orderField: self.orderField,
                    bigName:self.bigName,
                    midName:self.midName,
                };
                axios.post(uri,postData).then(function (result) {
                    self.total = result.data.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.data.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleCreate() {

            },
            handleChangeSel(value){
                if (value.length === 0) {
                    this.bigName = "";
                    this.midName = "";
                } else {
                    this.bigName = value[0];
                    this.midName = value[1];
                }
                console.log(value)
            },
            handleEdit(item) {
                this.dialogFormVisible = true;
                this.dialogFormTitle = '备注设置';
                //this.categoryTags = item.categoryNames;
                this.form.remark = item.remark;
                this.form.id = item.id;

            },//查询分类
            openEdit(id) {
                this.openUri('video/' + id + '/edit');
            },
            handleImgUrlSuccess: function (response) {
                let self = this;
                if (response.code === 200) {
                    self.form.imageUrl = response.url
                }
                console.log(response)
            },
            beforeAvatarUpload: function (item) {
                console.log(item)
            },
            init:function(){
                let self = this;
                let uri = 'image/init';
                self.loading = true;
                axios.get(uri).then(function (result) {
                    self.categories = result.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            submitSet() {
                let self = this;
                self.dialogFormVisible = false;

                self.loading = true;
                let uri = "image/" + self.form.id;
                axios.put(uri, self.form).then(function (data) {
                    self.search();
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
        },
        mounted() {
            this.search();
            this.init();
            //this.queryCompany();
        },
        filters: {
            titleFormatter(title) {
                if (title.length >= 10) {
                    return title.substring(0, 10) + '...';
                }
                return title.length === 0 ? '--' : title;
            }
        }
    }
</script>

<style scoped>
    /*.el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 130px;
        }*/
    .el-input--suffix .el-input__inner {
        padding-right: 0;
    }

    .card-body .el-input__icon {
        /*height: 100%;
        width: 25px;*/
        width: 0;
        text-align: center;
        -webkit-transition: all .3s;
        transition: all .3s;
        line-height: 40px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-upload__input {
        display: none;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 200px;
        display: block;
    }
</style>
